<template>
  <li class="chapter-item">
    <div class="chapter-title" @click="toggle">
      {{ expanded ? '📂' : '📁' }} {{ chapter.title || 'Untitled Chapter' }}
    </div>
    <transition name="fade-expand">
    <!-- 展开内容 -->
    <ul v-if="expanded" class="child-list">
        
      <!-- 文件列表 -->
      <li
        v-for="file in chapter.files || []"
        :key="'f-' + (file.fakeId || file.id)"
        class="file"
        @click="view(file)"
      >
         {{ file.name || 'Unnamed File' }}
        
      </li>

      <!-- 子章节（递归） -->
      <component
        :is="'ChapterItem'"
        v-for="child in chapter.children || []"
        :key="'c-' + child.id"
        :chapter="child"
        @view-file="$emit('view-file', $event)"
        @click-chapter="$emit('click-chapter', $event)"
      />
    </ul>
    </transition>
  </li>
</template>

<script>
import ChapterItem from './ChapterItem.vue' // ✅ 注册自身

export default {
  name: 'ChapterItem',
  components: {
    ChapterItem
  },
  props: {
    chapter: {
      type: Object,
      required: true,
      default: () => ({
        title: '',
        files: [],
        children: []
      })
    }
  },
  emits: ['view-file'],
  data() {
    return {
      expanded: false
    }
  },
  methods: {
    getDepth() {
      let depth = 0
      let parent = this.$parent
      while (parent && parent.$options.name === 'ChapterItem') {
        depth++
        parent = parent.$parent
      }
      return depth
    },
    toggle() {
        console.log(this.chapter.children)
      console.log(`点击章节: ${this.chapter.title}, 当前展开状态: ${this.expanded}, 深度: ${this.getDepth()}`)
      this.expanded = !this.expanded
      console.log(this.chapter.children)
      this.$emit('click-chapter', this.chapter.id) // ✅ 向父组件报告章节点击
    },
    view(file) {
      this.$emit('view-file', file)
    }
  }
}
</script>

<style scoped>
.chapter-item {
  list-style: none;
  margin: 10px 0;
  width: 100%;
}

/* 章节标题条 */
.chapter-title {
  display: flex;
  align-items: center;
  background-color: #f9fcff;
  border: 1px solid #cce4ff;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  max-width: 100%;
  word-break: break-word;
}

.chapter-title:hover {
  background-color: #eaf4ff;
  box-shadow: 0 0 4px rgba(1, 149, 255, 0.2);
}

.title-text {
  margin-left: 8px;
  flex: 1;
}

/* 子项列表 */
.child-list {
  padding: 6px 0 0 20px;
  margin: 6px 0 0 12px;
  border-left: 2px solid #d0e4ff; /* 👈 左侧竖线 */
  position: relative;
}

/* 可选：增加左侧竖线顶部对齐的微调 */
.child-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background-color: #d0e4ff;
  border-radius: 1px;
}

/* 动画过渡 */
.fade-expand-enter-active,
.fade-expand-leave-active {
  transition: all 0.3s ease;
}
.fade-expand-enter-from,
.fade-expand-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.fade-expand-enter-to,
.fade-expand-leave-from {
  max-height: 1000px;
  opacity: 1;
}

/* 文件样式 */
.file {
  padding: 6px 12px;
  margin: 4px 0;
  background-color: #fff;
  border-left: 3px solid transparent;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.file:hover {
  color: #409EFF;
  border-left-color: #409EFF;
  background-color: #f6faff;
}

/* 动画过渡样式 */
.fade-expand-enter-active,
.fade-expand-leave-active {
  transition: all 0.3s ease;
}

.fade-expand-enter-from,
.fade-expand-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.fade-expand-enter-to,
.fade-expand-leave-from {
  max-height: 1000px;
  opacity: 1;
}
</style>
